<template>
	<view class="first-login-dialog-componet">
		<Modal :show="show" @onClose="close" :clickMaskClose="true">
			<Content type="win" :imgStyle="imgStyles">
				<view class="main">
					<view class="integral">恭喜您抽中</view>
					<view class="can-tips"> VIP <view class="count">{{ count }}</view> 天 </view>
					<view class="btn">
						<CustomButton theme="yellow" btnTxt="领取到奖池" @onOk="onToPage" />	
					</view>
				</view>
			</Content>
			<slot slot="close">
				<view class="close-icon" @click="close"></view>
			</slot>
		</Modal>
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue'
	import Modal from '@/components/modal/index.vue'
	import Content from "./content.vue"
	import CustomButton from "./customButton.vue"
	
	
	
	const props = defineProps({
		count: {
			required: true,
			type: Number
		},
		visible:{
			requred: true,
			type: Boolean
		}
	})
	
	const imgStyles = ref({
			top: '-80rpx',
			left: 0,
			right:0,
			margin: 'auto'
		})
	
	const emit = defineEmits(['close', 'onOver', 'jump'])
	const show = ref(props.visible)
	
	const close = () => {
		emit('close')
		emit('onOver')
	}
	const  onToPage = () => {
		close()
		emit("jump")
	}

	
</script>

<style scoped lang="scss">
	.first-login-dialog-componet{
			
	}
	
	.close{
		font-size: 50upx;
		    position: fixed;
		    top: 500px;
		    z-index: 3000;
	}
	
	
	.close-icon{
		position: absolute;
		bottom: 250upx;
		width:68upx;
		height: 68upx;
		background:url("/static/images/global-notice/close.png") 0 0 no-repeat;
		background-size: cover;
	}
	
	.main{
		position: absolute;
		width: 100%;
		top: 150upx;
		display: flex;
		flex-direction: column;
		align-items: center;
		.integral{
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 36upx;
			color: #9E6538;
			text-align: center;
			font-style: normal;
			text-transform: none;
			display: flex;
			align-items: center;
			margin-bottom: 30upx;
			.num{
				color: #DF2626;
			}
		}
		.can-tips{
			display: flex;
			align-items: baseline;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 44upx;
			color: #9E6538;
			text-align: center;
			font-style: normal;
			text-transform: none;
			margin-bottom: 50upx;
			.count{
				font-family: DIN Pro, DIN Pro;
				font-weight: bold;
				font-size: 94upx;
				margin: 0 20upx;
				color: #9E6538;
				text-align: center;
				font-style: normal;
				text-transform: none;
			}
		}
		.btn{
			width: 100%;
		}
	}
</style>

<style lang="scss">
	
	.vant-dialog{
		overflow:visible !important;
	}
</style>